<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="工具" title="黑名单" :title1="subTitle"></crumbs>
        </div>
        <div class="outtabbox">
            <commonTabs v-model:active="active" :tabs="tabs"/>
        </div>
        <div class="w-full box-border p-16px">
            <div v-if="active === 1">
                <enterprise :type="1"/>
            </div>
            <div v-if="active === 2">
                <company :type="2"/>
            </div>
            <div v-if="active === 3">
                <personal :type="3"/>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import crumbs from '../../components/crumbs.vue'
import commonTabs from '@/components/commonTabs/index.vue'
import enterprise from './enterprise.vue'
import company from './company.vue'
import personal from './personal.vue'

import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()


// const outtabflag = ref(0)
// const changeouttab = (i) => {
//     outtabflag.value = i
// }
// const back = () => {
//     window.history.back()
// }

const active = ref(1)
const tabs = ref([
    {
        name: '企业黑名单',
        id: 1
    },
    {
        name: '派遣单位黑名单',
        id: 2
    },
    {
        name: '投保人员黑名单',
        id: 3
    }
])
const back = ()=>{
    router.go(-1)
}
const subTitle = computed(() => {
    const cur = tabs.value.find(i => i.id === active.value)
    return cur.name
})

</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}
</style>